<template>
  <div>
  <a-button type="primary" @click="addForm"> 添加账户 </a-button>

  <a-list
    class="demo-loadmore-list"
    item-layout="horizontal"
    :data-source="data"
  >
    <a-list-item slot="renderItem" slot-scope="item, index">
      <a slot="actions" @click="unbind(item)">解绑</a>
      <a-list-item-meta
        :description="item.platform"
      >
        <a slot="title" href="https://www.antdv.com/">{{ item.holder }}</a>
        <a-avatar
          slot="avatar"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        />
      </a-list-item-meta>
      <div>{{item.accountNo}}</div>
    </a-list-item>
  </a-list>

  <a-modal v-model="visible" title="添加账户" @ok="handleOk">
    <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      
      <a-form-item
          label="用户编号"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
        >
          <a-input v-model="form.userId"
            allowClear
            name="userId"
            autocomplete="off"
          />
        </a-form-item>

        <a-form-item
          label="账户所属公司"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
        >
          <a-input v-model="form.platform"
            allowClear
            name="platform"
            autocomplete="off"
          />
        </a-form-item>

        <a-form-item
          label="账号"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
        >
          <a-input v-model="form.accountNo"
            allowClear
            name="accountNo"
            autocomplete="off"
          />
        </a-form-item>

         <a-form-item
          label="持有人姓名"
          :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
          :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
        >
          <a-input  v-model="form.holder"
            allowClear
            name="holder"
            autocomplete="off"
          />
        </a-form-item>

    </a-form>
  </a-modal>
  </div>
</template>

<script>

import { add, getAccountList, unBind } from '@/api/mall/account'
export default {
  data () {
    return {
      data: [],
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        'userId': '1001',
        'platform': '',
        'accountNo': '',
        'holder': '',
        'status': '1',
        'userType': '1'
      },
      userId: '1001'
    }
  },
  created() {
    this.getAccountData()
  },
  methods: {
    addForm() {
      this.visible = true;
    },
    getAccountData(){
      getAccountList(this.userId).then(res => {
        console.log(res)
        this.data = res.data
      })
    },
    unbind(val){
      console.log(val)
      var that = this
      this.$confirm({
        title: `确定删除------${val.accountNo}-------吗？`,
        // content: _this.titl,
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
          // 调用接口解绑
          unBind(val.accountNo).then(res => {
            console.log(res)
            that.getAccountData()
          })

        },
        onCancel() {
          // console.log('Cancel');
        }
      })
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      //像后天请求接口保存表单数据
      console.log(this.form)
      add(this.form).then(res => {
        console.log(res)
        this.getAccountData()
      })
      
    },
  }
}
</script>

<style scoped>

</style>
